{include file="df/tpl/base_head" /}

{block name="area_head"}
<style type="text/css">
  .dd{ width:640px !important; }
  .dd3-handle:hover {
    background: #ddd !important;
  }
  .dd3-handle {
    background: #ECECEC !important;
    cursor: move;
    box-sizing: border-box;
  }
  .dd3-content:hover {
    background: #ECECEC !important;
    color: #5A5A5A !important;
  }
  .dd3-content {
    margin : 8px 0 !important;
    background: #f9f9f9 !important;
    color: #5A5A5A !important;
    padding-left: 60px !important;
  }
  .dd3-item>button[data-action="collapse"], .dd3-item>button[data-action="expand"] {
      color: #5A5A5A !important;
  }
  .dd3-content .action {
    display: none;
    margin-left: 10px;
  }
  .dd3-content:hover .action{
    display: inline-block;
  }
  .dd3-handle:before{
    top:5px !important;
    color: #A0A0A0 !important;
  }
  .dd-disable .dd3-content{
      background: #FFD5D0 !important;
      color: #D2847B !important;
  }
  .dd-disable .dd3-content:hover{
      background: #FDC7C1 !important;
  }
  .dd3-content:hover .list-icon{
      display: inline;
  }
  .dd-disable .dd3-handle{
      background: #FDC7C1 !important;
  }
  .dd-disable .dd3-handle:hover{
      background: #E49D9D !important;
  }
</style>
<link rel="stylesheet" href="__SKIN__css/lib/jquery.nestable.css">
<script src="__SKIN__js/lib/jquery.nestable.js"></script>
<script src="__SKIN__js/lib/jquery-ui.min.js"></script>
{/block}
</head>
<body style="padding:20px 20px 50px;">
{block name="area_body"}
  <div class="layui-field-box">
    {:html_head_tip('按住表头可拖动节点，调整后点击【保存节点】。')}
    <div class="block clearfix">
      <div class="layui-btn-group">
        <a class="layui-btn layui-btn-normal" href="{:url(CONTROLLER_NAME.'/set')}">
          <i class="fa fa-plus-circle"></i>   新增</a>
        <button class="layui-btn layui-btn-disabled" id="js-save">
          <i class="fa fa-check-circle-o"></i>    保存节点</button>
      </div>
      <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal" id="expand-all">
          <i class="fa fa-plus"></i>   展开所有</button>
        <button class="layui-btn" id="collapse-all">
          <i class="fa fa-minus"></i>   收起所有</button>
        <button class="layui-btn layui-btn-normal" id="hide_disable">
          <i class="fa fa-eye-slash"></i>    隐藏禁用</button>
        <button class="layui-btn" id="show_disable">
          <i class="fa fa-eye"></i>   显示禁用</button>
      </div>
      <a class="layui-btn fr layui-btn-primary" href="{:url(CONTROLLER_NAME.'/index')}">
        <i class="fa fa-superpowers"></i>   简洁模式</a>
    </div>
    <div class="dd" id="menu_list">
      <!-- 最多支持4级 -->
      <!-- 1级节点 -->
      <ol class="dd-list">
        {volist name="nodes" id="v"}
        <li class="dd-item dd3-item {$v.show ? '':'dd-disable'}" data-id="{$v.id}">
          <div class="dd-handle dd3-handle">拖拽</div>
          <div class="dd3-content">
            <i class="{$v.icon}"></i> {$v.name}
            <span class="link"><i class="fa fa-link"></i> {$v.link}</span>
            <div class="action">
              <a href="{:url(CONTROLLER_NAME.'/set',['parent'=>$v.id])}" class="tooltip" data-text="新增子节点"><i class="fa fa-plus fa-fw"></i></a>
              <a href="{:url(CONTROLLER_NAME.'/set',['id'=>$v.id])}" class="tooltip" data-text="编辑"><i class="fa fa-pencil fa-fw"></i></a>
              <a href="javascript:void(0);" data-id="{$v.id}" class="tooltip
              {$v.show ? 'disable':'enable'} " data-text="{$v.show ? '禁用':'启用'} "><i class="fa-{$v.show ? 'ban':'check-circle-o'} fa fa-fw"></i></a>
              <a href="{:url(CONTROLLER_NAME.'/del',['id'=>$v.id,'check'=>1])}" data-text="删除" class="tooltip ajax-get confirm"><i class="fa fa-times fa-fw"></i></a>
            </div>
          </div>
          {present name="v.child"}
          <!-- 2级节点 -->
          <ol class="dd-list">
          {volist name="v.child" id="v2"}
            <li class="dd-item dd3-item  {$v2.show ? '': 'dd-disable'}" data-id="{$v2.id}">
              <div class="dd-handle dd3-handle">拖拽</div>
              <div class="dd3-content">
                <i class="{$v2.icon}"></i> {$v2.name}
                <span class="link"><i class="fa fa-link"></i> {$v2.link}</span>
                <div class="action">
                  <a href="{:url(CONTROLLER_NAME.'/set',['parent'=>$v2.id])}" class="tooltip" data-text="新增子节点"><i class="fa fa-plus fa-fw"></i></a>
                  <a href="{:url(CONTROLLER_NAME.'/set',['id'=>$v2.id])}" class="tooltip" data-text="编辑"><i class="fa fa-pencil fa-fw"></i></a>
                  <a href="javascript:void(0);" data-id="{$v2.id}" class="tooltip {$v2.show ? 'disable':'enable'} " data-text="{$v2.show ? '禁用':'启用'} "><i class="fa-{$v2.show ? 'ban':'check-circle-o'} fa fa-fw"></i></a>
                  <a href="{:url(CONTROLLER_NAME.'/del',['id'=>$v2.id,'check'=>1])}" data-text="删除" class="tooltip ajax-get confirm"><i class="fa fa-times fa-fw"></i></a>
                </div>
              </div>
              {present name="v2.child"}
              <!-- 3级节点 -->
              <ol class="dd-list">
                {volist name="v2.child" id="v3"}
                <li class="dd-item dd3-item  {$v3.show ? '' :'dd-disable'}" data-id="<?=$v3['id']?>">
                  <div class="dd-handle dd3-handle">拖拽</div>
                  <div class="dd3-content">
                    <i class="{$v3.icon}"></i> {$v3.name}
                    <span class="link"><i class="fa fa-link"></i> {$v3.link}</span>
                    <div class="action">
                      <!-- <a href="{:url(CONTROLLER_NAME.'/set',['parent'=>$v3.id])}" class="tooltip" data-text="新增子节点"><i class="fa fa-plus fa-fw"></i></a> -->
                      <a href="{:url(CONTROLLER_NAME.'/set',['id'=>$v3.id])}" class="tooltip" data-text="编辑"><i class="fa fa-pencil fa-fw"></i></a>
                      <a href="javascript:void(0);" data-id="{$v3.id}" class="tooltip {$v3.show ? 'disable':'enable'} " data-text="{$v3.show ? '禁用':'启用'} "><i class="fa-{$v3.show ? 'ban':'check-circle-o'} fa fa-fw"></i></a>
                      <a href="{:url(CONTROLLER_NAME.'/del',['id'=>$v3.id,'check'=>1])}" data-text="删除" class="tooltip ajax-get confirm"><i class="fa fa-times fa-fw"></i></a>
                    </div>
                  </div>
                  {present name="v3.child"}
                  <!-- 4级节点 -->
                  <!--ol class="dd-list">
                  {volist name="v3.child" id="v4"}
                    <li class="dd-item dd3-item  {$v2.show ? '' :'dd-disable'}" data-id="{$v4.id}">
                      <div class="dd-handle dd3-handle">拖拽</div>
                      <div class="dd3-content">
                        <i class="{$v4.icon}"></i> {$v4.name}
                        <span class="link"><i class="fa fa-link"></i> {$v4.link}</span>
                        <div class="action">
                          <a href="{:url(CONTROLLER_NAME.'/set',['parent'=>$v4.id])}" class="tooltip" data-text="新增子节点"><i class="fa fa-plus fa-fw"></i></a>
                          <a href="{:url(CONTROLLER_NAME.'/set',['id'=>$v4.id])}" class="tooltip" data-text="编辑"><i class="fa fa-pencil fa-fw"></i></a>
                          <a href="javascript:void(0);" data-id="{$v4.id}" class="tooltip {$v4.show ? 'disable':'enable'} " data-text="{$v4.show ? '禁用':'启用'} "><i class="fa-{$v4.show ? 'ban':'check-circle-o'} fa fa-fw"></i></a>
                          <a href="{:url(CONTROLLER_NAME.'/del',['id'=>$v4.id,'check'=>1])}" data-text="删除" class="tooltip ajax-get confirm"><i class="fa fa-times fa-fw"></i></a>
                        </div>
                      </div>
                    </li>
                  {/volist}
                  </ol-->
                  {/present}
                </li>
                {/volist}
              </ol>
              {/present}
            </li>
          {/volist}
          </ol>
          {/present}
        </li>
        {/volist}
      </ol>
    </div>
  </div>
{/block}

{block name="area_foot"}
<!-- script -->
<script>
// require
// nodes:id,name,child show(0/1)
// dragSort(ids) editOne
layui.use(['rb'],function(){
  var layer = layui.layer
  ,rb=layui.rb
  ,$=layui.$;

  // 保存节点
  $('#js-save').click(function(){
      $.post("{:url(CONTROLLER_NAME.'/dragSort')}", { ids: $('#menu_list').nestable('serialize') }, function(data) {
        rb.ajaxTip(data,function(){
          $('#js-save').removeClass('btn-success').addClass('btn-default disabled');
        });
      });
  });

  // 初始化节点拖拽 todo:序列化改变在变
  $('#menu_list').nestable({ maxDepth:4 }).on('change', function(){
      $('#js-save').removeClass("layui-btn-disabled");
  });

  // 隐藏禁用节点
  $('#hide_disable').click(function(){
      $('.dd-disable').hide();
  });
  // 显示禁用节点
  $('#show_disable').click(function(){
      $('.dd-disable').show();
  });
  // 展开所有节点
  $('#expand-all').click(function(){
      $('#menu_list').nestable('expandAll');
  });
  // 收起所有节点
  $('#collapse-all').click(function(){
      $('#menu_list').nestable('collapseAll');
  });

  // 禁用节点 同时禁用子节点
  $('.dd3-content').on('click','.disable',function(){
      var self = $(this);
      var id   = self.data('id');
      var url  = "{:url(CONTROLLER_NAME.'/editOne',['field'=>'show','val'=>0],'')}";
      $.post(url, { id:id }, function(data) {
        rb.ajaxTip(data,function(){
          self.attr('data-text', '启用')
          .removeClass('disable').addClass('enable')
          .children().removeClass('fa-ban').addClass('fa-check-circle-o')
          .closest('.dd-item').addClass('dd-disable');
        });
      });
      return false;
  });

  // 启用节点 不管子节点
  $('.dd3-content').on( 'click','.enable', function(){
      var self = $(this);
      var id   = self.data('id');
      var url  = "{:url(CONTROLLER_NAME.'/editOne',['field'=>'show','val'=>1],'')}";
      $.post(url, { id:id }, function(data) {
        rb.ajaxTip(data,function(){
          self.attr('data-text', '禁用')
          .removeClass('enable').addClass('disable')
          .children().removeClass('fa-check-circle-o').addClass('fa-ban')
          .closest('.dd-item').removeClass('dd-disable');
        });
      });
      return false;
  });
})
</script>
{/block}